<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue里的箭头函数</title>
</head>
<body>
  <div id="root"></div>

  <script src="https://unpkg.com/vue@next"></script>  
  <script>
    const app = Vue.createApp({
      data(){
        return{
          message: "Hello Vue"
        }
      },
      methods: {
        // 使用箭头函数 this 指向的是 window
        onClick:()=>{
          // console.log('click', this.message) // undefined
          console.log('click', this) // window
        },
        // onClick(){
        //   console.log('click', this.message) // Hello Vue
        // },
        formatString(string){
          return string.toUpperCase();
        }
      },
      // template: `<div @click="onClick">{{ message }}</div>`
      template: `<div>{{ formatString(message)}}</div>`
    });
    const vm = app.mount('#root')
  </script>
</body>
</html>